<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>001-管网绘图</title>
  <style>
    body {
      background-color: #000;
      text-align: center;
    }

    canvas {
      background-color: #fff;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
    let canvas = null
    let context = null
    let width = 200
    let height = 200
    let realWidthPre = 0
    window.onload = function () {
      const canvasDivId = 'map'
      const canvasWidth = 800
      const canvasHeight = 400
      const canvasParams = [canvasDivId, canvasWidth, canvasHeight]
      initCanvas(canvasParams)
      let left = 100

      const data = [
        { // 监测点
          name: '永安桥南液位计',              // 监测点名称
          liquidHeight: 1.513,                // 液位(m)
          wellDistance: 86,                   // 井间距离(m)
          pipeDiameter: 1100,                 // 管径或管高(mm)
          groundElevation: 4.100,             // 地面标高(m)
          pipeUpStreamElevation: 1.213,       // 上游管内底(m)
          pipeDownStreamElevation: -0.217     // 下游管内底(m)
        },
        {
          name: '永安桥南液位计',
          liquidHeight: 1.170,
          wellDistance: 44,
          pipeDiameter: 600,
          groundElevation: 5.472,
          pipeUpStreamElevation: 0.272,
          pipeDownStreamElevation: 0.217
        },
        {
          name: '永安桥倒虹',
          liquidHeight: 0.990,
          wellDistance: 30,
          pipeDiameter: 1200,
          groundElevation: 5.417,
          pipeUpStreamElevation: 0.067,
          pipeDownStreamElevation: -0.030
        },
        {
          name: '永安桥倒虹',
          liquidHeight: 0.870,
          wellDistance: 18,
          pipeDiameter: 1200,
          groundElevation: 4.649,
          pipeUpStreamElevation: -0.120,
          pipeDownStreamElevation: 0.140
        },
        {
          name: '晋陵路关河路',
          liquidHeight: 0.990,
          wellDistance: 35,
          pipeDiameter: 1000,
          groundElevation: 4.541,
          pipeUpStreamElevation: 0.241,
          pipeDownStreamElevation: -0.220
        },
        {
          name: '晋陵路关河路',
          liquidHeight: 0.580,
          wellDistance: 81,
          pipeDiameter: 1000,
          groundElevation: 4.437,
          pipeUpStreamElevation: -0.063,
          pipeDownStreamElevation: -0.018
        },
        {
          name: '晋陵路关河路液位计',
          liquidHeight: 0.520,
          wellDistance: 53,
          pipeDiameter: 1100,
          groundElevation: 5.382,
          pipeUpStreamElevation: -0.018,
          pipeDownStreamElevation: 0.212
        },
        {
          name: '晋陵路关河路液位计',
          liquidHeight: 0.550,
          wellDistance: 0,
          pipeDiameter: 0,
          groundElevation: 5.912,
          pipeUpStreamElevation: 0,
          pipeDownStreamElevation: 0
        }
      ]

      const factWidth = canvasWidth - 10 - 10
      const factHeight = canvasHeight - 10 - 10
      const startX = 10
      const startY = 10

      let maxElevation = 0
      let sumDistance = 0

      data.forEach((place, index) => {
        if (place.groundElevation > maxElevation) {
          maxElevation = place.groundElevation
        }
        sumDistance += place.wellDistance
      })

      const heightScale = factHeight / (maxElevation * 2)
      const widthScale = factWidth / sumDistance
      const midFactHeight = factHeight / 2
      let xAxis = 0
      let groundElevationY = 0
      let liquidHeightY = 0
      let pipeUpStreamElevationBottomY = 0
      let pipeUpStreamElevationTopY = 0
      let pipeDownStreamElevationBottomY = 0
      let pipeDownStreamElevationTopY = 0
      data.forEach((place, index) => {
        const beforeX = xAxis
        const beforeGroundElevationY = groundElevationY
        const beforeLiquidHeightY = liquidHeightY
        xAxis += index ? data[index - 1].wellDistance * widthScale : startX
        // 1. 地面标高
        groundElevationY = startY + (midFactHeight - place.groundElevation * heightScale)

        // 2. 液位
        liquidHeightY = startY + (midFactHeight - place.liquidHeight * heightScale)

        // 3. 底部坐标
        const bottomY = startY + factHeight

        // 4. 管道
        // 上游
        const beforePipeUpStreamElevationBottomY = pipeUpStreamElevationBottomY
        const beforePipeUpStreamElevationTopY = pipeUpStreamElevationTopY
        pipeUpStreamElevationBottomY = startY + (midFactHeight - place.pipeUpStreamElevation * heightScale)
        pipeUpStreamElevationTopY = startY + (midFactHeight - (place.pipeUpStreamElevation + place.pipeDiameter / 1000) * heightScale)
        // 下游
        const beforePipeDownStreamElevationBottomY = pipeDownStreamElevationBottomY
        const beforePipeDownStreamElevationTopY = pipeDownStreamElevationTopY
        pipeDownStreamElevationBottomY = startY + (midFactHeight - place.pipeDownStreamElevation * heightScale)
        pipeDownStreamElevationTopY = startY + (midFactHeight - (place.pipeDownStreamElevation + place.pipeDiameter / 1000) * heightScale)

        if (index !== 0) {
          // 地面起伏
          context.beginPath()
          context.moveTo(beforeX, beforeGroundElevationY)
          context.lineTo(xAxis, groundElevationY)
          context.strokeStyle = 'yellow'
          context.stroke()

          // 液位
          context.beginPath()
          context.moveTo(beforeX, beforeLiquidHeightY)
          context.lineTo(xAxis, liquidHeightY)
          context.strokeStyle = 'blue'
          context.stroke()

          // 管道上
          context.beginPath()
          context.moveTo(beforeX, beforePipeUpStreamElevationBottomY)
          context.lineTo(xAxis, beforePipeDownStreamElevationBottomY)
          context.strokeStyle = 'black'
          context.stroke()
          // 管道下
          context.beginPath()
          context.moveTo(beforeX, beforePipeUpStreamElevationTopY)
          context.lineTo(xAxis, beforePipeDownStreamElevationTopY)
          context.strokeStyle = 'black'
          context.stroke()
        }
        
        context.beginPath()
        context.moveTo(xAxis, groundElevationY)
        context.lineTo(xAxis, bottomY)
        context.strokeStyle = 'black'
        // context.strokeStyle = `rgb(${Math.ceil(Math.random()*255)}, ${Math.ceil(Math.random()*255)}, ${Math.ceil(Math.random()*255)})`
        context.stroke()

        // 4. 黄海海平面、管径、管段
        if (index === data.length - 1) {
          // 黄海海平面
          const planeStartX = startX
          const planeStartY = startY + midFactHeight
          const planeEndX = startX + factWidth
          const planeEndY = startY + midFactHeight
          context.beginPath()
          context.moveTo(planeStartX, planeStartY)
          context.lineTo(planeEndX, planeEndY)
          context.strokeStyle = 'green'
          context.stroke()

          // 管径
          const pipeDiameterStartX = startX
          const pipeDiameterStartY = startY + midFactHeight + midFactHeight / 2 + midFactHeight / 2 / 2 / 2
          const pipeDiameterEndX = startX + factWidth
          const pipeDiameterEndY = startY + midFactHeight + midFactHeight / 2 + midFactHeight / 2 / 2 / 2
          context.beginPath()
          context.moveTo(pipeDiameterStartX, pipeDiameterStartY)
          context.lineTo(pipeDiameterEndX, pipeDiameterEndY)
          context.strokeStyle = 'black'
          context.stroke()

          // 管段
          const pipeSectionStartX = startX
          const pipeSectionStartY = startY + midFactHeight + midFactHeight / 2 + midFactHeight / 2 / 2 + midFactHeight / 2 / 2 / 2
          const pipeSectionEndX = startX + factWidth
          const pipeSectionEndY = startY + midFactHeight + midFactHeight / 2 + midFactHeight / 2 / 2 + midFactHeight / 2 / 2 / 2
          context.beginPath()
          context.moveTo(pipeSectionStartX, pipeSectionStartY)
          context.lineTo(pipeSectionEndX, pipeSectionEndY)
          context.strokeStyle = 'black'
          context.stroke()
        }
      })


    }

    /*
    * 绘制横向线
    */
    function drawHorizontal(places) {
      if (!context) {
        return
      }
      places.forEach((item, index) => {
        item.forEach((value, idx) => {
          if (index < places.length -1 && item.length - 1 != idx && idx > 3) {
            context.beginPath()
            context.moveTo(value[0], value[1])
            context.lineTo(places[index+1][idx][0], places[index+1][idx][1])
            if (idx === 4) {
              context.strokeStyle = 'green'
            } else {
              context.strokeStyle = 'black'
            }
            context.stroke()
          }
        })
      })
    }

    /*
    * 绘制纵向线
    */
    function drawVertical(places) {
      if (!context) {
        return
      }
      places.forEach(item => {
        context.beginPath()
        context.moveTo(item[0][0], item[0][1])
        context.lineTo(item[item.length -1][0], item[item.length -1][1])
        context.stroke()
      })
    }

    /*
    * 绘制斜向线
    */
    function drawOblique(places) {
      if (!context) {
        return
      }
      places.forEach((item, index) => {
        item.forEach((value, idx) => {
          if (index < places.length -1 && item.length - 1 != idx && idx < 4) {
            context.beginPath()
            context.moveTo(value[0], value[1])
            context.lineTo(places[index+1][idx][0], places[index+1][idx][1])
            context.stroke()
          }
        })
      })
    }

    /**
     * 初始化canvas 信息
     */
    function initCanvas([canvasDomId, canvasWidth, canvasHeight]) {
      const canvasParent = document.getElementById(canvasDomId)
      if (canvas) {
        canvas.parentNode.removeChild(canvas)
      }
      canvas = document.createElement("canvas")
      canvasParent.appendChild(canvas)
      width = canvasWidth
      height = canvasHeight
      canvas.width = width
      canvas.height = height
      context = canvas.getContext("2d")
    }
  </script>
</body>

</html>